require(['./config'], () => {
    require(['template', 'header', 'footer'], (template,header) => {
      class Shop {
        constructor () {
          this.rap2Like()
          this.render()
        }
        rap2Like(){
          $.get('http://rap2.taobao.org:38080/app/mock/265792/api/home/list', resp => {
            if(resp.code === 200){
              const { list } = resp.body
              $('#like-ul').html(template('rap2-list', { list }))
            }
          })
        }

        render () {
          const cart = localStorage.getItem('cart')
          if (cart) {
            $('.cart-products').show()
            $('.cart-empty').hide()
            this.cart = JSON.parse(cart)
            $('#shopping-Car').html(template('shoppingCar', { cart: this.cart }))
            this.cartShop()
          }else{
            $('.cart-products').hide()
            $('.cart-empty').show()
          }
          header.calcCartCount()
        }

        cartShop () {
          this.allChecked() 
          this.allMoney() 
          this.checkedChange() 
          this.allCheckChange()
          this.number()
          this.remove()
        }
      
        allChecked () {
          const isAllCheck = this.cart.every(shop => shop.check)
          $('.col-checkbox .checkall').prop('checked', isAllCheck)
          $('.cart-footer .checkall').prop('checked', isAllCheck)
        }
      
        allMoney () {
          const money = this.cart.reduce((total, shop) => {
            if (shop.check) total += shop.price * shop.count
            return total
          }, 0)
          $('#top-total1').html(money.toFixed(2))
          $('#top-total2').html(money.toFixed(2))
          $('#bottom-total').html(money.toFixed(2))
        }
      
        checkedChange () {
          const _this = this
          $('.check').on('change', function () {
            const isCheck = $(this).prop('checked')
            const id = $(this).parents('ol').data('id')
            _this.cart = _this.cart.map(shop => {
              if (shop.id === id) shop.check = isCheck
              return shop
            })
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            _this.allChecked()
            _this.allMoney()
          })
        }
      
        allCheckChange () {
          const _this = this
          $('.checkall').on('change', function(){
            const allCheck = $(this).prop('checked')
            _this.cart = _this.cart.map(shop => {
              shop.check = allCheck
              return shop
            })
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            $('.check').prop('checked', allCheck)
            _this.allChecked()
            _this.allMoney()
          })
        }

        number(){
          const _this = this
          $('.sub-btn').on('click',function(){
            const subId = $(this).parents('ol').data('id')
            _this.cart = _this.cart.map(shop => {
              if(shop.id === subId){
                shop.count--
                if(shop.count <= 0){
                  shop.count = 1
                }
              } 
              return shop
            })
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            _this.render()
          })
          $('.add-btn').on('click',function(){
            const addId = $(this).parents('ol').data('id')
            _this.cart = _this.cart.map(shop => {
              if(shop.id === addId) shop.count++
              return shop
            })
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            _this.render()
          })
        }

        remove(){
          const _this = this
          $('.del-btn').on('click',function(){
            const removeId = $(this).parents('ol').data('id')
            _this.cart = _this.cart.filter(shop => {
              return shop.id !== removeId
            })
            if(_this.cart.length === 0){
              localStorage.removeItem('cart')
            }else{
              localStorage.setItem('cart', JSON.stringify(_this.cart))
            }
            $('.col-checkbox .checkall').prop('checked', false)
            $('.cart-footer .checkall').prop('checked', false)
            _this.allMoney()
            _this.render()
          })
        }

      }
      new Shop()
    })
})